<template>
  <div class="account-info">
    <div class="title" style="margin-top:16px"><div class="dot"/>基础信息</div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      label-position="right"
      label-width="120px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="平台：" prop="platformName" style="margin-bottom: 0px;">
            <div class="plateform">
              <platformIcon :data="accountsInfo.platformName" />
              <ToolTip :content="accountsInfo.platformName" placement="top"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号：" prop="accountName" style="margin-bottom: 0px;">
            <ToolTip
              :is-can-click="!!accountsInfoItem.accountInfoId "
              :content="accountsInfo.accountName"
              :class="{ 'link': !!accountsInfoItem.accountInfoId }"
              placement="top"
              @handelClick="toResourceDetail(accountsInfoItem.accountInfoId )"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主页链接：" prop="link" style="margin-bottom: 0px;">
            <div v-if="accountsInfo.link && (accountsInfo.link.indexOf('http://') === 0 || accountsInfo.link.indexOf('https://') === 0)" class="flex">
              <el-tooltip :open-delay="500" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ accountsInfo.link }}</div>
                <a
                  :href="accountsInfo.link"
                  target="_blank"
                  class="name link-name">
                  点击跳转<img src="../../../assets/medium/link.png" alt="">
                </a>
              </el-tooltip>
            </div>
            <ToolTip v-else :content="accountsInfo.link" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号ID：" prop="accountCode" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.accountCode" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="达人所在城市：" prop="area" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.area ? accountsInfo.area.replace(/,/g, '-') : ''"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：" prop="area" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.gender | sexFilter"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签：" prop="tagName" style="margin-bottom: 0px;">
            <!-- <TagSelect v-model="accountsInfo.tag" mode="detail" /> -->
            <TagSelect v-model="accountsInfo.tagName" mode="detail" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否挂靠：" prop="microtask" style="margin-bottom: 0px;">
            {{ accountsInfo.microtask?'是':'否' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="粉丝量：" prop="fansNum" style="margin-bottom: 0px;">
            <ToolTip :content="numFormat(accountsInfo.fansNum,true,1,'万')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="点赞数：" prop="likeNum" style="margin-bottom: 0px;">
            <ToolTip :content="numFormat(accountsInfo.likeNum,true,1,'万')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评论数：" prop="commentNum" style="margin-bottom: 0px;">
            <ToolTip :content="numFormat(accountsInfo.commentNum,true,1,'万')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收藏数：" prop="commentNum" style="margin-bottom: 0px;">
            <ToolTip :content="numFormat(accountsInfo.favouritesNum,true,1,'万')"/>
          </el-form-item>
        </el-col>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(accountsInfo.dynamicKey)" :span="12" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接单偏好：" prop="preference" style="margin-bottom: 0px;">
            <ToolTip :content="accountsInfo.preference" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="title"><div class="dot"/>价格信息</div>
    <priceInfo :data="{ additionalKey, platformName: accountsInfo.platformName }" :span="12" />
    <div class="title"><div class="dot"/>签约信息</div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      label-position="right"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="签单签约经纪：" prop="agentName" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.agentName" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约所属部门：" prop="signDeptName" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.signDeptName && contractInfo.signDeptName.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合作方式：" prop="cooperation" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.cooperation | cooperationStatusFilter"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="协作部门：" prop="signDeptName" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.cooperationDepartmentName | arrayToNameStringFilter" />
          </el-form-item>
        </el-col>
        <!--
        <el-col :span="12">
          <el-form-item label="合同编号：" prop="legalCode" class="flex-form-row">
            <div v-if="showLegalName" style="display: flex;">
              <ToolTip :content="handleLegalName(contractInfo.legalCode)" style="margin-right: 8px;" is-can-click placement="top" @handelClick="toContractDetail(contractInfo.legalCode)"/>
              <div v-if="signDetailStatus === SIGN_DETAIL_STATUS.WAIT_SIGN">(无合同)</div>
              <div v-else-if="signDetailStatus === SIGN_DETAIL_STATUS.AUTO_RENEWAL">(无新合同)</div>
              <template v-else-if="[SIGN_DETAIL_STATUS.SIGNED, SIGN_DETAIL_STATUS.RENEWAL].includes(signDetailStatus)">
                <div v-if="contractInfo.isExpired">(<span style="color: #FF4E5F;">已到期</span>)</div>
                <div v-else>(距离到期日： <span :style="expiredTypeClass(contractInfo.expiredDuration)">
                  {{ getExpiredDuration('contractInfo') }}</span> 天)</div>
              </template>
              <div v-else>(距离到期日： -- 天)</div>
            </div>
            <template v-else>
              <div v-if="signDetailStatus === SIGN_DETAIL_STATUS.WAIT_SIGN">-- (无合同)</div>
              <div v-else-if="signDetailStatus === SIGN_DETAIL_STATUS.AUTO_RENEWAL">-- (无新合同)</div>
              <div v-else>-- (距离到期日： -- 天)</div>
            </template>
          </el-form-item>
        </el-col>
        -->
        <el-col :span="12">
          <el-form-item label="签约有效期：" prop="signDate" style="margin-bottom: 0px;">
            <ToolTip :content="formatSignDate(contractInfo,'YYYY/MM/DD')" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动续约：" prop="autoRenewal" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.autoRenewal | autoRenewalFilter" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目前进度：" prop="schedule" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.schedule | formatScheduleFilter" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作微信：" prop="workWxCode" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.workWxCode" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐理由：" prop="reason" style="margin-bottom: 0px;">
            <ToolTip :content="contractInfo.reason"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <div class="title" style="margin-top:25px"><div class="dot"/>价格信息</div> -->
    <div class="title" style="margin-top:16px"><div class="dot"/>分成信息</div>
    <el-form
      :class="{'mobile-el-form': showMobilePage,'dividing': !showMobilePage}"
      label-position="right"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="分成比例：" prop="profitSharingRatio" style="margin-bottom: 0px;">
            <div v-if="priceInfo.profitSharingRatio || priceInfo.profitSharingRatio === 0">
              公司：{{ `${priceInfo.profitSharingRatio}%` }}，达人：{{ `${talentSharingRatio}%` }}
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分成说明：" prop="profitSharingRemark" style="margin-bottom: 0px;">
            <ToolTip :content="priceInfo.profitSharingRemark" placement="top"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="返点比例：" prop="rebateRatio" style="margin-bottom: 0px;">
            <div v-if="priceInfo.rebateRatio || priceInfo.rebateRatio === 0">
              {{ `${priceInfo.rebateRatio}%` }}
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对接人员：" prop="rebateRatio" class="flex-form-row" style="margin-bottom: 0;">
            <div v-if="showAllDockingUsers">
              <span>{{ handleArrayContent(priceInfo.dockingUsers) }}</span>
              <span style="color: #406EFF; cursor: pointer;" @click="openFollowDialog">查看全部</span>
            </div>
            <CheckUserInfo
              v-else
              :user-list="priceInfo.dockingUsers"
              :multiple="priceInfo.dockingUsers && priceInfo.dockingUsers.length > 1"
              :user-id="priceInfo.dockingUsers && priceInfo.dockingUsers.length === 1 ? priceInfo.dockingUsers[0].id : null"
              :label="priceInfo.dockingUsers && priceInfo.dockingUsers.length === 1 ? priceInfo.dockingUsers[0].name : null"
              key-name="id"
              label-name="name"
              style="display: inline-block;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保底金额(元)：" prop="guaranteePrice" style="margin-bottom: 0px;">
            <div v-if="priceInfo.guaranteePrice || priceInfo.guaranteePrice === 0">
              {{ `${priceInfo.guaranteePrice}元` }}
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保底说明：" prop="guaranteeRemark" style="margin-bottom: 0px;">
            <ToolTip :content="priceInfo.guaranteeRemark" placement="top"/>
          </el-form-item>
        </el-col>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(priceInfo.dynamicKey)" :span="12" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 合同信息 -->
    <ContractInfo
      ref="showRelatedContract"
      v-model="contractList"
      :show-operate="false"
      :show-associate-btn="showAssociateBtn"
      style="margin: 16px 0 0 16px"
      @onContractSelect="onContractSelect" />
    <operatorDialog
      ref="followDialog"
      :is-mobile="showMobilePage"
      :user-list="priceInfo.dockingUsers"
      title="对接人员"
      value-name="name"/>
  </div>
</template>
<script>
import Title from '@/components/Title';
import priceInfo from '@/views/filter/components/priceInfo';
import FileShowList from '@/components/CreateOrder/fileShowList';
import platformIcon from '@/components/Common/platformIcon';
import ContractInfo from '@/components/SignUp/model/contractInfo';
import TagSelect from '@/components/Common/tagSelect';
import operatorDialog from '@/views/resource/detail/model/operatorDialog.vue';
import { encryption } from '@/utils';
import math from '@/utils/math';
import { expiredTypeClass } from './status';
import { cooperationStatusFilter, formatScheduleFilter } from '@/utils/accountCommonData';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
import { editSignPoint, editAccountRenewal } from '@/api/signUp';
import { numFormat } from '@/filters/number';
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
import { SIGN_DETAIL_STATUS } from '@/utils/const/resouce';

export default {
  components: {
    Title,
    FileShowList,
    platformIcon,
    ContractInfo,
    operatorDialog,
    TagSelect,
    priceInfo
  },
  filters: {
    cooperationStatusFilter,
    formatScheduleFilter,
    sexFilter(val) {
      return {
        0: '男',
        1: '女'
      }[val] || null;
    },
    autoRenewalFilter(val) {
      return {
        0: '否',
        1: '是'
      }[val] || null;
    },
    arrayToNameStringFilter(list, key = 'name') {
      if (!Array.isArray(list) || !list.length) return '';
      return list.map(i => i[key]).join();
    }
  },
  props: {
    accountsInfo: {
      type: Object,
      default: () => { return {}; }
    },
    priceInfo: {
      type: Object,
      default: () => { return {}; }
    },
    contractInfo: {
      type: Object,
      default: () => { return {}; }
    },
    contractList: {
      type: Array,
      default: () => []
    },
    signManageInfo: {
      type: Object,
      default: () => ({})
    },
    operationSetEvents: {
      type: Array,
      default: () => {
        return [];
      }
    },
    processList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 0: '草稿中',1: '审批中',2: '未过审',3: '已作废',4: '已完成',5: '待提交'
    status: {
      type: Number | String,
      default: 0
    },
    signUpId: { // 审批单id
      type: Number | String,
      default: ''
    },
    id: {
      type: Number | String,
      default: ''
    },
    signStatus: {
      type: Number,
      default: null
    },
    signDetailStatus: {
      type: Number,
      default: null
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    processFinished: { // 审批单已完成
      type: Boolean,
      default: false
    },
    showAssociateBtn: { // 是否开启关联合同事件
      type: Boolean,
      default: false
    },
    accountsInfoItem: {
      type: Object,
      default: () => ({})
    },
    additionalKey: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      SIGN_DETAIL_STATUS,
      numFormat,
      editSignPoint: false,
      editSignPointContent: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    showLegalName() {
      return this.contractInfo.legalCode && (this.contractInfo.legalCode.contractCode || this.contractInfo.legalCode.contractName || this.contractInfo.legalCode.draft);
    },
    showAllDockingUsers() {
      return this.priceInfo.dockingUsers && this.priceInfo.dockingUsers.length > 3;
    },
    talentSharingRatio() {
      return math.subtract(100, this.priceInfo.profitSharingRatio);
    },
    isExamine() { // 当前用户是否是当前节点审批人
      const processList = this.processList;
      if (!processList || processList.length === 0) return false;
      let item = null;
      processList.forEach(i => {
        // nodeStatus 节点状态： 0：结束 1：进行中 2：未审批
        if (!item && i.nodeStatus === 1) {
          item = i;
        }
      });
      if (!item || item.length === 0) return false;
      let userList = [];
      item.items.forEach(i => {
        userList = userList.concat(i.users);
      });
      return userList.some(i => {
        return i.id === this.userInfo.id;
      });
    }
  },
  methods: {
    format,
    hasRouteAuth,
    expiredTypeClass,
    formatSignDate(data) {
      if (data.signStartDate || data.signEndDate) {
        return this.format(data.signStartDate, 'YYYY/MM/DD') + '-' + this.format(data.signEndDate, 'YYYY/MM/DD');
      } else {
        return '--';
      }
    },
    handleLegalName(legal) {
      if (legal.contractCode || legal.contractName) {
        return legal.contractCode || legal.contractName;
      }
      if (legal.draft) {
        return '草稿中';
      }
    },
    handleArrayContent(arr = [], key = 'name') {
      if (arr.length === 0) {
        return '--';
      }
      let names = [];
      names = arr.map(j => j[key]);
      if (names.length > 3) {
        return `${names.slice(0, 3).join('、').substring(0, 16)}...`;
      }
      return names.join('、');
    },
    handleField(fields = []) { // 自定义字段处理
      if (fields && fields.length > 0) {
        fields.forEach(el => {
          if (el.inputType === 1 || el.options) {
            const arr = el.options && el.options.filter(j => Number(el.value) === Number(j.value)) || [];
            if (arr.length > 0) {
              el.value = arr[0].label;
            }
          }
        });
      }
      return fields;
    },
    // 打开资源，搜索标签
    openResourceLabel(label) {
      const url = this.$router.resolve({
        name: 'Medium',
        query: {
          label
        }
      });
      window.open(url.href, '_blank');
    },
    openFollowDialog() {
      this.$refs['followDialog'].openDialog();
    },
    // 跳转详情
    toContractDetail(data) {
      let routeUrl = '';
      if (data.draft) {
        routeUrl = this.$router.resolve({
          name: 'EditContract',
          params: {
            id: encryption(data.id)
          }
        });
      } else {
        routeUrl = this.$router.resolve({
          name: 'contractDetail',
          params: { id: encryption(data.id) },
          query: {
            processId: encryption(data.processId)
          }
        });
      }
      window.open(routeUrl.href, '_blank');
    },
    editSignPointFun(defaultVal) {
      this.editSignPoint = true;
      this.editSignPointContent = defaultVal || defaultVal === 0 ? defaultVal : undefined;
    },
    editSignPointOk() {
      this.editSignPoint = false;
      const params = {
        signPoint: this.editSignPointContent || this.editSignPointContent === 0 ? this.editSignPointContent : null,
        id: this.id
      };
      editSignPoint(params).then((res) => {
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.contractInfo.signPoint = this.editSignPointContent;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    editSignPointClose() {
      this.editSignPoint = false;
      this.editSignPointContent = '';
    },
    joinStr(list) {
      if (!list) return '';
      if (list && list.length > 0) {
        return list.map(i => i.name).join(',');
      }
      return '';
    },
    getExpiredDuration(key) {
      const { expiredDuration } = this[key] || {};
      return ((expiredDuration || expiredDuration === 0) && expiredDuration !== 9999) ? expiredDuration : '--';
    },
    renewalStatusChange(status) {
      showModal('确认变更自动续约状态吗？').then(() => {
        const params = {
          status,
          accountTempId: this.id
        };
        editAccountRenewal(params).then(res => {
          res.code === 200 && this.$message.success('操作成功');
        }).finally(() => {
          this.$emit('refreshData');
        });
      });
    },
    // 跳转至达人解约详情
    goTerminationDetail() {
      const routeUrl = this.$router.resolve({
        name: 'terminationDetail',
        query: {
          terminationId: this.signManageInfo.terminationId,
          processId: this.signManageInfo.terminationProcessId
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    onContractSelect(data) {
      this.$emit('onContractSelect', data);
    },
    // 账号资源详情
    toResourceDetail(id) {
      const routeUrl = this.$router.resolve({
        name: 'detailResource',
        params: { resourceId: id }
      });
      window.open(routeUrl.href, '_blank');
    },
    relatedContractShow() {
      this.$refs['showRelatedContract'].relatedContractShow();
    }
  }
};
</script>
<style lang="scss" scoped>
  .dividing{
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
  .account-info{
    position: relative;
    .title{
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 16px;
      margin:16px 0 10px 14px;
      display: flex;
      align-items: center;
      .dot {
        width: 4px;
        height: 4px;
        background-color: #406EFF;
        margin-right: 6px;
      }
    }
    color: #333333;
    .plateform{
      display: flex;
      flex-wrap: nowrap;
    }
    .link-name {
      display: flex;
      align-items:center;
      color: #406eff;
      img {
        position: relative;
        top: 1px;
        width: 11px;
        margin-left: 3px;
      }
      .el-icon-link {
        font-size: 12px;
      }
    }
    .labels{
      display: flex;
      flex-wrap: wrap;
      .label-item{
        cursor: pointer;
        .label{
          color: #406eff;
          white-space: nowrap;
          background: #eff3fb;
          padding: 2px 8px;
          margin-right: 8px;
          border-radius: 2px;
        }
        .label:hover{
          opacity: .7;
        }
      }
    }
    .flex-form-row {
      ::v-deep {
        .el-form-item__content {
          display: flex;
          align-items: center;
        }
      }
    }
    .renewal-value {
      &::v-deep {
        > .el-dropdown-link {
          cursor: default !important;
          color: #333;
          font-size: 14px;
        }
        > .el-dropdown-selfdefine {
          cursor: pointer !important;
          &:hover {
            color: #406EFF;
          }
        }
      }
    }
    .stamp-fixed-tip {
      z-index: 999;
      background-color: #FFF8EA;
      border-radius: 4px;
      font-size: 14px;
      padding: 3px 22px 3px 8px;
      margin-left: 8px;
      line-height: 24px;
      span {
        color: #333;
      }
      .icon {
        cursor: pointer;
        margin-left: 8px;
        color: #C0C4CC;
        &:hover {
          color: #909399;
        }
      }
      ::v-deep .el-icon-warning {
        color: #E6A23C;
      }
    }
    .related-btn {
      margin-left: 12px;
      padding-left: 12px;
      padding-right: 12px;
    }
    .sign-status-box {
      position: absolute;
      right: 32px;
      top: 33px;
      z-index: 999;
      > img {
        width: 80px;
        height: 80px;
      }
    }
    &::v-deep {
      .el-form-item {
        margin-bottom: 0;
        &.indentation-form-item {
          label {
            line-height: 1.2 !important;
          }
        }
      }
      .mb32 {
        margin-bottom: 22px;
        margin-top: 8px;
      }
      .dividing{
          .el-col {
            .el-form-item__content {
              border-right: 1px solid #EBEEFD;
            }
            &:nth-child(2n) {
              .el-form-item__content {
                border-right: none;
              }
            }
            &:last-child {
              .el-form-item__content {
                border-right: none;
              }
            }
          }
      }
    }
  }
  .signPoint-edit {
    display: flex;
    align-items: center;
    position: relative;
    .button-text {
      margin-left: 5px;
    }
  }
.mock-input {
  &::v-deep {
    .el-input-number__increase,.el-input-number__decrease {
      display: none;
    }
    .el-input__inner {
      text-align: left;
      padding-left: 8px;
      padding-right: 73px;
    }
  }
}
.renewal-dropdown {
  margin-top: 2px !important;
  margin-right: -25px !important;
  width: 60px;
  padding: 0 !important;
  text-align: center;
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-input__inner {
      width: 240px;
    }
  }
}
.input-btn {
  position: absolute;
  right: 0;
  padding: 0 5px;
  z-index: 10;
  .el-icon-check {
    cursor: pointer;
    font-size: 15px;
    color: #406EFF;
  }
  .el-icon-close {
    cursor: pointer;
    font-size: 15px;
  }
}
.link {
  cursor: pointer;
  color: #406EFF;
}
</style>
